<template>
  <div>
    <div v-if="message != null">{{message}}</div>
    <div>
      <label>
        登录名
        <input v-model="loginName" />
      </label>
    </div>
    <div>
      <label>
        密码
        <input v-model="password" type="password" />
      </label>
    </div>
    <div>
      <button v-on:click="login">登录</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      message: null,
      loginName: null,
      password: null
    };
  },
  mounted(){
    axios
        .post("/api/logout")
        .then(response => {
          this.$router.push("/login");
        })
        .catch(response => {
          //console.log(response);
          alert("退出登录出现问题");
        });
  },
  methods: {
    // function login() {}
    login() {
      // 发送请求到授权中心去登录，最简单的主机名应该从redirectUrl里面去截取，表示在授权中心去登录。
      // redirectUrl本身就是授权中心的。
      // let url = "http://127.0.0.1:30003/do-login";
      // 透过代理访问登录链接
      let url = "/do-login";

      //  使用JSON发送数据
      //   let data = {
      //     loginName: this.loginName,
      //     password: this.password
      //   };

      // 使用普通表单发送数据，FormData是HTML+JS的内置对象
      let data = new FormData();
      data.append("loginName", this.loginName);
      data.append("password", this.password);

      axios
        .post(url, data)
        .then(response => {
          // 登录成功以后，需要跳转到首页
          let result = response.data;
          if (result.code === 1) {
            // 成功
            // this.$router 表示前端路由器，用于跳转到其他路由
            // push相当于修改地址栏的URL链接
            // 有时候还会使用this.$route 表示当前路由，用于获取路由参数

            // 根据路由参数完成授权的链接
            let redirectUrl =
              this.$route.params.redirectUrl || "/api/user-center/user-info";
            // if (redirectUrl) {
            // 再：发送请求到路由传递过来的重定向地址，完成网关的授权
            axios
              .get(redirectUrl)
              .then(resp => {
                // 转发页面到首页
                this.$router.push("/");
              })
              .catch(error => {
                this.$router.push("/");
              });
            // } else {
            //   this.$router.push("/");
            // }
          } else {
            // 失败
            console.error("登录失败", result);
            this.message = "登录失败";
          }
        })
        .catch(error => {
          // 提示登录失败
          console.error(error);
        });
    }
  }
};
</script>